<!--
 * @Author: your name
 * @Date: 2020-12-23 16:51:55
 * @LastEditTime: 2020-12-23 17:45:36
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \basiccss\xuanzeqi\weilei.html
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        /*root 根元素选择伪类即选择html*/
        :root{
            font-size: 15px;
        }
        /*初始的颜色*/
        a:link{
            color:red;
        }
        /*已经访问过的*/
        a:visited{
            color: green;
        }
        /*鼠标滑过的时候*/
        a:hover{
            color: blue;
        }
        /*选中的时候*/
        a:active{
            color: yellow;
        }

        /*获取到焦点的时候*/
        input:focus{
            background: green;
            outline: none;
        }

        /*滑过焦点*/
        input:hover{
            background: blue;
        }

        /*选中焦点*/
        input:active{
            background: yellow;
        }

        /* :target用于控制具有锚点元素的样式 */

        /*不止链接可以使用伪类,其他元素也可以，下面是对表单的点击与获取焦点状态的样式*/
        div{
            height: 900px;
            border: 2px solid #cccccc;
        }
        /*当前的div为a所对应的锚点*/
        /*本身默认指的就是id  但是跟锚点对应了,就是锚点元素,点击锚点之后才会触发,点击一次锚点之后会写入到缓存中*/
        div:target{
            color: red;
        }
        ul li {
            border: 1px solid green;
        }
        /*没有内容和空白的元素,下面的li没有内容的时候会消失掉*/
        :empty{
            display: none;
        }
    </style>
</head>
<body>
    <!-- <a href="https://www.houdunren.com">后盾人</a>

    <input type="text"> -->

    <a href="#hdcms">hdcms</a>
    <div></div>
    <div id="hdcms">
        hdcms内容关系系统
    </div>
    <ul>
        <li>新的li新元素</li>
        <li></li>
    </ul>
</body>
</html>
